<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.endSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-select v-model="searchQuery.siteId" placeholder="提车网点" clearable filterable>-->
          <!--              <el-option v-for="item in siteArray" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
<!--      <div class="op">
        <el-button size="mini" :disabled="additional" @click="addFee">额外费用</el-button>
        <el-button size="mini" :disabled="additional" @click="generatePickNote">生成提车单</el-button>
      </div>-->
    </div>
    <div class="box-style">
      <div class="top">
        <ad-table :data="finishList" u-table @sort-change="finishSortInitList"
                  :data-changes-scroll-top="finishIsScrollTop"
                  v-loading="finishInitLoading" @table-body-scroll="finishGetMoreList"
                  :searchQuery="finishSearchQuery" @search="finishGetInitList" @filter-change="finishFilterInitList"
                  :height="tableHeight" @cell-click="cellClick">
          <ad-table-column label="序号" type="index" ctype="index" fixed/>
          <ad-table-column label="制单人" prop="orderCreateUserName" w="3c2f" searchable sortable/>
          <ad-table-column label="制单时间" prop="orderCreateTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="订单号" prop="orderSubNo" ctype="orderNo" sortable searchable>
            <!--                                    <template slot-scope="scope">-->
            <!--                                      <el-input size="mini" v-model="scope.row.orderSubNo"></el-input>-->
            <!--                                    </template>-->
          </ad-table-column>
          <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" searchable/>
          <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" searchable/>
          <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
          <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
          <ad-table-column label="联系人" prop="linkmanName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="linkmanPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="预约提车时间" prop="appointPickTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="提车指派人" prop="pickUserName" w="5c2f" searchable/>
          <ad-table-column label="提车指派时间" prop="createTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="提车地址" prop="pickAddress" ctype="address-2f" searchable/>
          <ad-table-column label="提车方式" prop="pickType" w="4c2f" dictName="pickcar_type" filterable/>
          <ad-table-column label="验车人" prop="verifyUserName" w="5c2f" searchable/>
          <ad-table-column label="验车时间" prop="verifyTime" width="130" ctype="datetime" sortable/>

          <ad-table-column label="运输方式" prop="transportType" dictName="transport_way" filterable w="4c1f"/>
          <ad-table-column label="结算人" prop="settlementName" w="3c2f" searchable/>
          <ad-table-column label="结算方式" prop="settlementType" w="4c2f" dictName="settlement_type" filterable/>
          <ad-table-column label="结算电话" prop="settlementPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="提车司机" prop="driverName" w="4c2f" searchable/>
          <ad-table-column label="司机电话" prop="driverPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="提车费" prop="pickCarFee" w="3c2f" searchable/>
          <ad-table-column label="订单备注" prop="orderRemark" ctype="remark"/>
        </ad-table>
      </div>


<!--      底部弹出框-->
<!--      <el-drawer-->
<!--        :visible.sync="drawer"-->
<!--        direction="btt"-->
<!--        :with-header="false">-->
      <el-dialog
        title="提示"
        :visible.sync="drawer"
        width="95%">
      <div id="bottom" class="bottom" style="min-height: 290px">
        <div class="title-bar" v-if="!isInspect" style="height:36px;"></div>
        <div v-if="!isInspect"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>
        <div v-else-if="isInspect">
          <div class="title-bar">
            <h2>订单编号 : {{orderSubNo}}</h2>
           <div class="op">
        <el-button size="mini"  @click="addFee">额外费用</el-button>
        <el-button size="mini"  @click="generatePickNote">生成提车单</el-button>
      </div>
          </div>
          <div class="content">
            <div class="left" style="min-width: 460px">
              <div class="form-wrapper assign" style="width:100%;position: relative">
                <h3>提车信息</h3>
<!--                <div v-if="isHasInspect" style="position: absolute;right:10px;margin-top: 3px;">-->
<!--                  <el-button v-if="isEditDraw" size="mini" type="primary" plain @click="saveEditDraw">保存-->
<!--                  </el-button>-->
<!--                  <el-button v-if="isEditDraw" size="mini" type="primary" plain @click="againDrawData">取消-->
<!--                  </el-button>-->
<!--                  <el-button v-if="!isEditDraw" size="mini" type="primary" plain @click="isEditDraw=true">修改-->
<!--                  </el-button>-->
<!--                </div>-->
                <el-descriptions v-if="isHasInspect" :column="2" border size="mini" style="overflow: auto;">
                  <el-descriptions-item label="指派结算人时间">
                    <!--                    <el-date-picker size="mini" style="width: 160px;margin: -5px 0;" v-if="isEditDraw" v-model="data.createTime"-->
                    <!--                                    value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" placeholder="请输入"-->
                    <!--                                    clearable/>-->
                    <value :model="data" prop="createTime" style="width: 148px;display: inline-block;" type="datetime"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派人">
                    <value :model="data" prop="pickUserName" style="width: 102px;display: inline-block;"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="公司名称" :span="2">
                    <el-input :disabled="dialogSettlerVisible" @focus="showGetList" style="margin: -5px 0;width: 322px;"
                              v-if="isEditDraw" size="mini"
                              v-model="data.companyName"/>
                    <value v-else :model="data" prop="companyName"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算人">
                    <el-input :disabled="dialogSettlerVisible" @focus="showGetList" v-if="isEditDraw" size="mini"
                              v-model="data.settlementName"
                              style="width:110px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="settlementName" style="width: 148px;display: inline-block;"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算电话">
                    <el-input :disabled="dialogSettlerVisible" @focus="showGetList" v-if="isEditDraw" size="mini"
                              v-model="data.settlementPhone"
                              style="width:110px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="settlementPhone" style="width: 102px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算方式">
                    <ad-status-select placeholder="必选" style="width: 110px;margin: -5px 0;" size="mini"
                                      v-if="isEditDraw"
                                      v-model="data.settlementType"
                                      :dict="dict.settlement_type"/>
                    <value v-else :model="data" prop="settlementType" dictName="settlement_type" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="提车费">
                    <el-input v-if="isEditDraw" placeholder="必填" size="mini" maxLength="6" v-model="data.pickCarFee"
                              style="width:110px;margin: -5px 0;"/>
                    <!--                    <value v-else :model="data" prop="pickCarFee" style="width: 110px"/>-->
                    <div v-else-if="data.pickCarFee" style="color: red;font-size: 12px;">
                      ￥
                      <value :model="data" prop="pickCarFee" style="width: 110px"/>
                    </div>
                    <value v-else :model="data" prop="pickCarFee" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派司机时间">
                    <value :model="data" prop="assignDriverTime" type="datetime" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派人">
                    <value :model="data" prop="pickUserName" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="司机姓名">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.driverName"
                              style="width:110px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="driverName" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="司机电话">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.driverPhone"
                              style="width:110px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="driverPhone" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="身份证号">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.driverCardNumber"
                              style="width:110px;margin: -4px 0;"/>
                    <value v-else :model="data" prop="driverCardNumber" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="小板车牌">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.licensePlateNumber"
                              style="width:110px;margin: -4px 0;"/>
                    <value v-else :model="data" prop="licensePlateNumber" style="width: 110px"/>
                  </el-descriptions-item>
                </el-descriptions>
                <div v-else
                     style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
                  <div style="height:44px">
                    <img :src="noData"/>
                  </div>
                  自送网点无提车信息
                </div>
              </div>
            </div>
            <div class="right" :style="{'border-left':'none'}">
              <div class="form-wrapper driver" style="width:100%; position: relative">
                <h3>验车信息</h3>
                <div style="position: absolute;right:10px;margin-top: 3px;">
<!--                  <el-button v-if="isEditInspect" size="mini" type="primary" plain @click="saveEditInspect">保存-->
<!--                  </el-button>-->
                  <el-button v-if="isEditInspect" size="mini" type="primary" plain @click="saveEditDraw">保存
                  </el-button>
                  <el-button v-if="isEditInspect" size="mini" type="primary" plain @click="againData">取消
                  </el-button>
                  <el-button v-if="!isEditInspect" size="mini" type="primary" plain @click="()=>{isEditInspect=true;isEditDraw=true;}">修改
                  </el-button>
                </div>
              </div>
              <div class="form-wrapper scroll-y"
                   :style="{'width':'100%','display': 'inline-block','height':rightHeight,'overflow-x':'hidden','overflow-y':'auto'}">
                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 62px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    外观及内饰验车照片
                  </div>
                </div>
                <div id="lineImg" class="form-content"
                     style="margin-left: 130px;border-bottom: 1px #e3e3e3 solid;height:63px;padding-top: 2px;">
                  <div v-show="inspectForm.validateImages.length==0 && !isEditInspect" class="noImg">
                    暂无图片
                  </div>
                  <div v-show="inspectForm.validateImages.length>0" style="line-height: 16px">
                    <!--                    <el-image v-if="!isEditInspect" v-for="url in inspectForm.validateImages" :key="url" :src="url"-->
                    <!--                              style="width: 90px; height: 58px;margin-right: 10px;"-->
                    <!--                              :preview-src-list="inspectForm.validateImages"></el-image>-->
                    <viewer v-if="!isEditInspect" :images="inspectForm.validateImages">
                      <img v-for="(url,i) in inspectForm.validateImages" :id="'img'+i" :src="url" :key="url"
                           :style="{'width': '90px', 'height': '58px','margin-right': '10px','display':i>5?'none':'inline'}">
                      <span class="imgsMore" @click="viewerImg"
                            v-if="inspectForm.validateImages.length>6">更多</span>
                    </viewer>
                  </div>
                  <ad-upload v-show="isEditInspect" multiple @input="getImgUrl" ref="adimg"
                             style="line-height: 16px"/>
                </div>
                <div
                    style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车时间
                  </div>
                </div>
                <div
                    style="width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{inspectForm.createTime}}
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车人
                  </div>
                </div>
                <div
                    style="width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{inspectForm.createUserName}}
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    入库时间
                  </div>
                </div>
                <div
                    style="width:150px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{inspectForm.stockTime}}
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    入库人
                  </div>
                </div>
                <div
                    style="font-size: 12px;width: 100%;margin-left: 980px">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{inspectForm.stockUserName?inspectForm.stockUserName:'-'}}
                  </div>
                </div>

                <div
                    style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    车架/车牌号
                  </div>
                </div>
                <div
                    style="width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 29px;height:30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    <el-input v-if="isEditInspect" size="mini" v-model="inspectForm.vin"
                              maxLength="17"/>
                    <div v-else>{{inspectForm.vin}}</div>
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    公里数
                  </div>
                </div>
                <div
                    style="width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 29px;height:30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding:0 10px;">
                    <el-input v-if="isEditInspect" size="mini" v-model="inspectForm.km"
                              maxLength="10"/>
                    <div v-else>{{inspectForm.km}}</div>
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车备注
                  </div>
                </div>
                <div
                    style="font-size: 12px;width: 100%;margin-left: 730px">
                  <div
                      style="height:30px;line-height: 29px;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    <el-input v-if="isEditInspect" :disabled="!isEditInspect" size="mini" v-model="inspectForm.remark"
                              maxLength="100"
                              style="max-width: 600px;"/>
                    <div v-else>{{inspectForm.remark ? inspectForm.remark:'-'}}</div>
                  </div>
                </div>



              </div>
            </div>
          </div>
        </div>
      </div>
      </el-dialog>
<!--      </el-drawer>-->




    </div>
    <!--添加、修改弹窗-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="额外费用"
        :visible.sync="dialogVisible"
        width="830px"
        class="customerFormDialog"
    >
      <outlay-manage id="outlayManage" ref="outlayManage" :id="data.orderId" :visible.sync="dialogVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addFeeList" size="small">新 增</el-button>
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>
    <!--查找结算列表信息-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="选择结算人"
        :visible.sync="dialogSettlerVisible"
        width="730px"
        class="customerFormDialog"
    >
      <settler-manage ref="settlerManage" @select="selectLink" :id="data.orderId" :visible.sync="dialogSettlerVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addSettlerList" size="small">新 增</el-button>
              <el-button @click="dialogSettlerVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>
    <!--查找司机列表信息-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="选择司机"
        :visible.sync="dialogDriverVisible"
        width="850px"
        class="customerFormDialog"
    >
      <driver-manage ref="driverManage" @select="selectDriverLink" :id="data.companyId"
                     :visible.sync="dialogDriverVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addDriverList" size="small">新 增</el-button>
              <el-button @click="dialogDriverVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import AdSuggestion from '@/components/AdSuggestion'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import adTable from '@/mixins/adTable'
  import Value from '@/components/AdValue'
  import api, {get as finishApiGetList} from '@/api/pick/finish';
  import AdUpload from '@/components/AdUpload'
  import noData from '@/assets/404_images/nodata.png';
  import OutlayManage from './../components/outlayManage';
  import AdStatusSelect from '@/components/AdStatusSelect'
  import SettlerManage from '@/components/SettlerManage';
  import DriverManage from '@/components/DriverManage'
  import {
    getCompanyList as getSuggestCompanyList
  } from '@/api/suggestion'
  import apiUser from '@/api/system/user';
  import {parseStatus} from '@/utils/code';
  import moment from 'moment';

  export default {
    name: 'pick-pickRecord',
    components: {
      AdTable,
      AdTableColumn,
      AdSuggestion,
      Value,
      AdUpload,
      OutlayManage,
      AdStatusSelect,
      SettlerManage,
      DriverManage
    },
    dicts: ['pick_driver_status', 'pickcar_status', "verifycar_status", "pick_stock_status", "pickcar_type", "settlement_type",'transport_way'],
    mixins: [adTable([
      {name: 'finish', pk: 'code'},
    ])],
    data() {
      return {
        drawer: false,
        noData,
        siteArray: [],
        additional: true,
        isInspect: false,
        isEditInspect: false,
        isEditDraw: false,
        rightHeight: 'calc(28vh - 72px)',
        searchQuery: {
          beginSearchTime: null,
          endSearchTime: null,
          siteId: null
        },
        tableHeight: 440,
        bottomTabHeight: 300,
        topTableData: [
          {creator: '按不出', no: 'http:www.baidu.com'}
        ],
        saveForm: {
          company: '',
          pickCarFee: null,
          settlementName: '',
          settlementPhone: '',
          settlementType: '',
          driverName: '',
          driverPhone: '',
          driverCardNumber: '',
          licensePlateNumber: ''
        },
        inspectForm: {
          createTime: null,
          createUserName: null,
          stockTime: null,
          stockUserName: null,
          specification: undefined,
          towHook: undefined,
          ashtray: undefined,
          toolkit: undefined,
          antenna: undefined,
          key: undefined,
          warningSign: undefined,
          licensePlateFrame: undefined,
          aidPacket: undefined,
          footPad: undefined,
          airPump: undefined,
          cigarLighter: undefined,
          spareTire: undefined,
          jack: undefined,
          bellCover: undefined,
          vin: undefined,
          km: undefined,
          remark: undefined,
          validateImages: []
        },
        rules: {
          company: [
            {required: true, message: '必选', trigger: 'blur'},
          ],
          settlementName: [
            {required: true, message: '必选', trigger: 'blur'},
          ],
          settlementType: {required: true, message: '必选', trigger: 'blur'},
          settlementPhone: [
            {required: true, message: '必选', trigger: 'blur'},
          ]
        },
        inspectRules: {
          vin: [
            {required: true, message: '必填', trigger: 'blur'},
          ],
          km: [
            {required: true, message: '必填', trigger: 'blur'},
          ]
        },
        operates: {
          list: [
            {
              label: '移除',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                return false;
              },
              method: (index, row) => {
                this.del(row, index);
              }
            }
          ]
        },
        orderSubNo: '',
        data: {},
        cloneData: {},
        isHasInspect: true,
        isInWarehouse: false,
        validateImages: [],
        images: [],
        dialogVisible: false,
        dialogSettlerVisible: false,
        dialogDriverVisible: false,
      }
    },
    created() {
      let self = this;
      self.finishGetInitList()
      setTimeout(function () {
        self.tableHeight = document.documentElement.clientHeight  - 160;
        // self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 145;
        // self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
      })
      //获取网点信息
      this.getSiteList()
      console.log(self.detectZoom())
      if (this.detectZoom() == 100) {
        this.rightHeight = 'calc(28vh - 72px)'
      }
      if (this.detectZoom() == 125) {
        this.rightHeight = 'calc(28vh - 57px)'
      }
    },
    methods: {
      finishApiGetList, parseStatus, getSuggestCompanyList,

      viewerImg: function () {
        document.getElementById('img0').click()
      },
      detectZoom: function () {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      },
      //查询
      queryList: function () {
        let self = this;
        self.isInspect = false;
        self.additional = true;
        self.finishGetInitList()
      },
      getSiteList: function () {
        let self = this;
        apiUser.getSiteList().then(res => {
          self.siteArray = res.data
        })
      },
      cellClick(row, column, event) {
        this.drawer = true;
        let self = this;
        self.isEditInspect = false;
        self.isEditDraw = false;
        switch (column.property) {
          default:
            if (row.orderId == self.data.orderId) {
              break
            }
            console.log(row)
            self.isInWarehouse = true;
            if (row.pickId && row.pickType != 4) {
              self.isHasInspect = true;
            } else {
              self.isHasInspect = false;
            }
            self.clearFrom();
            self.data = JSON.parse(JSON.stringify(row));
            self.cloneData = JSON.parse(JSON.stringify(row));
            self.images = [];
            self.orderSubNo = row._row ? row._row.orderSubNo : row.orderSubNo;
            self.inspectForm.specification = undefined;
            self.inspectForm.towHook = undefined;
            self.inspectForm.ashtray = undefined;
            self.inspectForm.toolkit = undefined;
            self.inspectForm.antenna = undefined;
            self.inspectForm.key = undefined;
            self.inspectForm.warningSign = undefined;
            self.inspectForm.licensePlateFrame = undefined;
            self.inspectForm.aidPacket = undefined;
            self.inspectForm.footPad = undefined;
            self.inspectForm.airPump = undefined;
            self.inspectForm.cigarLighter = undefined;
            self.inspectForm.spareTire = undefined;
            self.inspectForm.jack = undefined;
            self.inspectForm.bellCover = undefined;
            self.inspectForm.vin = null;
            self.inspectForm.km = undefined;
            self.inspectForm.remark = null;
            self.inspectForm.createTime = '-';
            self.inspectForm.createUserName = '-';
            self.inspectForm.stockTime = '-';
            self.inspectForm.stockUserName = '-';
            self.inspectForm.validateImages = [];

            self.isInspect = true;
            api.gegGerifyData(row.orderId).then(res => {
              self.inspectForm.specification = res.data.specification;
              self.inspectForm.towHook = res.data.towHook;
              self.inspectForm.ashtray = res.data.ashtray;
              self.inspectForm.toolkit = res.data.toolkit;
              self.inspectForm.antenna = res.data.antenna;
              self.inspectForm.key = res.data.key;
              self.inspectForm.warningSign = res.data.warningSign;
              self.inspectForm.licensePlateFrame = res.data.licensePlateFrame;
              self.inspectForm.aidPacket = res.data.aidPacket;
              self.inspectForm.footPad = res.data.footPad;
              self.inspectForm.airPump = res.data.airPump;
              self.inspectForm.cigarLighter = res.data.cigarLighter;
              self.inspectForm.spareTire = res.data.spareTire;
              self.inspectForm.jack = res.data.jack;
              self.inspectForm.bellCover = res.data.bellCover;
              self.inspectForm.vin = res.data.vin;
              self.inspectForm.km = res.data.km;
              self.inspectForm.remark = res.data.remark;
              self.inspectForm.createTime = moment(res.data.createTime).format("YYYY-MM-DD hh:mm:ss");
              self.inspectForm.createUserName = res.data.createUserName;
              self.inspectForm.stockTime = moment(res.data.stockTime).format("YYYY-MM-DD hh:mm:ss");
              self.inspectForm.stockUserName = res.data.stockUserName;
              self.inspectForm.validateImages = res.data.validateImages;
              res.data.validateImages.forEach((d, i) => {
                self.images.push({
                  name: d,
                  url: d
                })
              })
              self.$refs.adimg.images = [];
              self.$refs.adimg.imagesUrl = [];
              self.$refs.adimg.images = self.images;
              self.$refs.adimg.imagesUrl = res.data.validateImages;
            })
            self.isInspect = true;
            self.additional = false;
        }
      },
      getImgUrl: function (data) {
        let self = this;
        self.inspectForm.validateImages = data;
        console.log(data)
      },
      selectLink(link) {
        let self = this;
        self.dialogSettlerVisible = false;
        self.data.companyId = link.companyId
        self.data.companyName = link.companyName
        self.data.settlementId = link.linkmanId
        self.data.settlementName = link.linkmanName
        self.data.settlementPhone = link.linkmanPhone
        self.data.driverId = null;
        self.data.driverName = '';
        self.data.driverPhone = '';
        self.data.driverCardNumber = '';
        self.data.licensePlateNumber = '';
      },
      //选择司机
      selectDriverLink(link) {
        let self = this;
        self.dialogDriverVisible = false;
        self.data.driverId = link.driverId ? link.driverId : null;
        self.data.driverName = link.driverName;
        self.data.driverPhone = link.phone;
        self.data.driverCardNumber = link.driverCardNumber;
        self.data.licensePlateNumber = link.licensePlateNumber;
      },
      removeLink() {
        let self = this;
        self.data.companyId = ''
        self.data.companyName = ''
        self.data.settlementId = ''
        self.data.settlementName = ''
        self.data.settlementPhone = undefined
      },
      //显示结算人窗口
      showGetList: function () {
        let self = this;
        self.dialogSettlerVisible = true;
      },
      //显示司机窗口
      showDriverList: function () {
        let self = this;
        if (self.data.companyId == null || self.data.companyId == '') {
          self.$notify({
            title: '司机信息',
            message: '请先选择公司信息',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        self.dialogDriverVisible = true;
      },
      //清空
      clearFrom: function () {
        let self = this;
        self.removeLink();
        self.saveForm.pickCarFee = null;
        self.saveForm.settlementType = null;
        self.saveForm.driverName = '';
        self.saveForm.driverPhone = '';
        self.saveForm.driverCardNumber = '';
        self.saveForm.licensePlateNumber = ''
      },
      //验车保存
      saveEditInspect() {
        let self = this;
        // if (self.inspectForm.vin == null || self.inspectForm.km == null) {
        //   self.$notify({
        //     title: '保存',
        //     message: '车架/车牌号和公里数必填',
        //     position: 'bottom-right',
        //     type: 'warning'
        //   });
        //   return
        // }
        self.$confirm('是否确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ajaxData = {};
          ajaxData = {...self.inspectForm};
          ajaxData.orderId = self.data.orderId;
          api.verify(ajaxData).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
              self.inspectForm = {
                specification: undefined,
                towHook: undefined,
                ashtray: undefined,
                toolkit: undefined,
                antenna: undefined,
                key: undefined,
                warningSign: undefined,
                licensePlateFrame: undefined,
                aidPacket: undefined,
                footPad: undefined,
                airPump: undefined,
                cigarLighter: undefined,
                spareTire: undefined,
                jack: undefined,
                bellCover: undefined,
                vin: undefined,
                km: undefined,
                remark: null,
                validateImages: []
              };
              self.isInspect = false;
            } else {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });
      },
      saveEditDraw() {
        let self = this;
        if (self.data.pickCarFee == '' || self.data.settlementType == null || self.data.settlementType == '') {
          self.$notify({
            title: '保存',
            message: '请选择结算方式并填写提车费',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (isNaN(self.data.pickCarFee)) {
          self.$notify({
            title: '保存',
            message: '提车费必须是数字',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        let ajaxData = {
          orderId: self.data.orderId,
          company: self.data.companyName,
          companyId: self.data.companyId,
          pickCarFee: self.data.pickCarFee,
          settlementId: self.data.settlementId,
          settlementName: self.data.settlementName,
          settlementPhone: self.data.settlementPhone,
          settlementType: self.data.settlementType,
          driverId: self.data.driverId,
          driverName: self.data.driverName,
          driverPhone: self.data.driverPhone,
          driverCardNumber: self.data.driverCardNumber,
          licensePlateNumber: self.data.licensePlateNumber,
        };
        ajaxData.orderCarVerify = {...self.inspectForm};
        ajaxData.orderCarVerify.orderId = self.data.orderId;
        api.updataPick(ajaxData).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'success'
            });
            self.queryList();
            self.isEditDraw = false;
          } else {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            });
          }
        })
      },
      //取消
      againData() {
        let self = this;
        self.isEditInspect = false;
        self.isEditDraw = false;
        self.image = [];
        api.gegGerifyData(self.data.orderId).then(res => {
          self.inspectForm.specification = res.data.specification;
          self.inspectForm.towHook = res.data.towHook;
          self.inspectForm.ashtray = res.data.ashtray;
          self.inspectForm.toolkit = res.data.toolkit;
          self.inspectForm.antenna = res.data.antenna;
          self.inspectForm.key = res.data.key;
          self.inspectForm.warningSign = res.data.warningSign;
          self.inspectForm.licensePlateFrame = res.data.licensePlateFrame;
          self.inspectForm.aidPacket = res.data.aidPacket;
          self.inspectForm.footPad = res.data.footPad;
          self.inspectForm.airPump = res.data.airPump;
          self.inspectForm.cigarLighter = res.data.cigarLighter;
          self.inspectForm.spareTire = res.data.spareTire;
          self.inspectForm.jack = res.data.jack;
          self.inspectForm.bellCover = res.data.bellCover;
          self.inspectForm.vin = res.data.vin;
          self.inspectForm.km = res.data.km;
          self.inspectForm.remark = res.data.remark;
          self.inspectForm.createTime = moment(res.data.createTime).format("YYYY-MM-DD hh:mm");
          self.inspectForm.createUserName = res.data.createUserName;
          self.inspectForm.stockTime = moment(res.data.stockTime).format("YYYY-MM-DD hh:mm");
          self.inspectForm.stockUserName = res.data.stockUserName;
          self.inspectForm.validateImages = res.data.validateImages;
          self.images = [];
          res.data.validateImages.forEach((d, i) => {
            self.images.push({
              name: d,
              url: d
            })
          });
          console.log(self.images);
          self.$refs.adimg.images = [];
          self.$refs.adimg.imagesUrl = [];
          self.$refs.adimg.images = self.images;
          self.$refs.adimg.imagesUrl = res.data.validateImages;
        })
      },
      againDrawData() {
        let self = this;
        self.isEditDraw = false;
        self.data = JSON.parse(JSON.stringify(self.cloneData));
      },
      //额外费用
      addFee: function () {
        let self = this;
        self.dialogVisible = true;
      },
      //新增结算人
      addSettlerList: function () {
        let self = this;
        self.$refs.settlerManage.addDriver();
      },
      //新增司机
      addDriverList: function () {
        let self = this;
        self.$refs.driverManage.addDriver();
      },
      //新增
      addFeeList: function () {
        let self = this;
        self.$refs.outlayManage.addDriver();
      },
      // 生成提车单
      generatePickNote: function () {
        let self = this;
        apiUser.generatePickNote({
          id: self.data.orderId
        }).then(res => {
          if (res.code == 0) {
            self.$confirm('是否查看提车单?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              window.open(res.data)
            }).catch(() => {

            });
            // self.queryList();
            // self.tableData = [];
          } else {
            self.$notify({
              title: '生成提车单',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            });
          }
        })
      },

    }

  }
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;

    .box-style {
      display: flex;
      flex: 1;
      border: 1px solid #e3e3e3;
      flex-direction: column;
    }

    .top {
      display: flex;
      flex: 1;
      border-bottom: 1px solid #4da7fa;
      flex-direction: column;

      &:after {
        content: '';
        display: block;
        height: 4px;
        background: #4da7fa;
        opacity: 0.2;
      }

      .table-wrapper {
        flex: 1;
      }

      .table {
        flex: 1;
      }
    }

    .bottom {
      display: flex;
      height: 30vh;
      flex-direction: column;

      .title-bar {
        display: flex;
        line-height: 36px;
        background: #f5f5f5;
        border-bottom: 1px solid #e3e3e3;
        padding-left: 10px;
        flex-shrink: 0;

        .op {
          margin-left: auto;
          margin-right: 12px;
        }
      }

      .content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .left {
          display: flex;

          &:after {
            content: '';
            display: block;
            width: 3px;
            background: #4da7fa;
            opacity: 0.2;
          }
        }

        .middle {
          display: flex;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .table-wrapper {
            height: 100%;
          }
        }

        .form-wrapper {
          display: flex;
          flex: 1;
          flex-direction: column;
          width: 18vw;

          h3 {
            height: 35px;
            box-sizing: border-box;
          }

          .form-content {
            padding: 10px 10px 0 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .el-form-item {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      & > .title-bar {
        padding-left: 16px;
        border-bottom: 1px solid #bdd0e3;
        background: #f5f5f5;
        align-items: center;
      }

      h2 {
        font-size: 12px;
      }

      h3 {
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        background: #f5f5f5;
        line-height: 30px;
        font-size: 12px;
      }

      //.left h3 { border-right: 1px solid #e3e3e3; }
      //.middle h3 { border-left: 1px solid #e3e3e3; }
      .right {
        border-left: 1px solid #e3e3e3;
      }
    }
  }
</style>